<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>微信支付</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
    <script th:src="@{/js/jquery.slim.min.js}"></script>
    <script th:src="@{/js/popper.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <style>
        body{
            padding: 20px;
        }
    </style>

    <script type="text/javascript">
        function action(type) {
            switch (type) {
                case 1://刷卡支付
                    var amt1 = $("#amt1").val();
                    var barcode = $("#barcode").val();
                    window.location.href="/wechat/pay/micro_pay?amt="+amt1+"&barcode="+barcode;
                    break;
                case 2://扫码支付
                    var amt2 = $("#amt2").val();
                    window.location.href="/wechat/pay/qrcode?amt="+amt2;
                    break;
                case 3://公众号支付
                    var amt3 = $("#amt3").val();
                    window.location.href="/wechat/pay/mp?amt="+amt3;
                    break;
                case 4://退款
                    var amt = $("#amt4").val();
                    var outTradeNo = $("#out_trade_no").val();
                    window.location.href="/wechat/refund?amt="+amt+"&out_trade_no="+outTradeNo;
                    break;
            }
        }
    </script>
</head>
<body>

<div class="container">

    <div class="alert alert-success text-center" role="alert">
        微信支付 示例
    </div>

    <div class="card  mb-3">
        <div class="card-header">
            刷卡支付
        </div>
        <div class="card-body">

            <div class="row">


                <div class="col-6">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">条码|金额</span>
                        </div>
                        <input id="barcode" type="text" placeholder="条码" aria-label="单号" class="form-control">
                        <input id="amt1" type="text" placeholder="金额" value="" aria-label="金额" class="form-control">
                    </div>
                </div>

                <div class="col-6">
                    <button onclick="action(1)" class="btn btn-primary btn-success  btn-block"> 刷卡支付</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card  mb-3">
        <div class="card-header">
            扫码支付
        </div>
        <div class="card-body">

            <div class="row">
                <div class="col-6">
                    <div class="input-group mb-1">
                        <div class="input-group-prepend">
                            <span class="input-group-text">输入金额</span>
                        </div>
                        <input type="text" id="amt2" class="form-control" placeholder="金额" aria-label="输入金额" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="col-6">
                    <button onclick="action(2)" class="btn btn-primary btn-success btn-block">扫码支付</button>
                </div>
            </div>


        </div>
    </div>

    <div class="card  mb-3">
        <div class="card-header">
            公众号支付
        </div>
        <div class="card-body">

            <div class="row">
                <div class="col-6">
                    <div class="input-group mb-1">
                        <div class="input-group-prepend">
                            <span class="input-group-text">输入金额</span>
                        </div>

                        <input type="text" id="amt3" class="form-control" placeholder="金额" aria-label="输入金额" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="col-6">
                    <button onclick="action(3)" class="btn btn-primary btn-success  btn-block" disabled>公众号支付(<span style="font-size: 10px;">调整后台代码后自行启用</span>)</button>
                </div>
            </div>

        </div>
    </div>


    <div class="card  mb-3">
        <div class="card-header">
            支付订单退款
        </div>
        <div class="card-body">

            <div class="row">

                <div class="col-6">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">单号|金额</span>
                        </div>
                        <input id="out_trade_no" type="text" placeholder="单号" value="" aria-label="单号" class="form-control">
                        <input id="amt4" type="text" placeholder="金额" value="" aria-label="金额" class="form-control">
                    </div>
                </div>

                <div class="col-6">
                    <button onclick="action(4)" class="btn btn-primary btn-success  btn-block" disabled> 开始退款(<span style="font-size: 10px;">调整后台代码后自行启用</span>)</button>
                </div>
            </div>

        </div>
    </div>

</div>


</body>
</html>
